<!DOCTYPE html>
<html lang="en">

<head>
    <title>productList</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="css/bootstrap.css">
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css"><!-- 图标样式 -->
    <link rel="stylesheet" type="text/css" href="./css/goodDetail.css">
    <link href="css/owl.carousel.css" rel="stylesheet" type="text/css" media="all">

    <script src="js/jquery-2.2.3.min.js"></script>
    <script src="js/jquery-scrolltofixed-min.js" type="text/javascript"></script><!-- 导航栏 -->
    <script type="text/javascript" src="js/move-top.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/main.js"></script>
    <script src="js/owl.carousel.js"></script>
    <script src="js/jquery.menu-aim.js"></script>
    <script src="js/custom.js"></script>
</head>

<body>
    <div class="header" id="header"></div>
    <div id="app">
        <!-- products -->
        <div class="products">
            <div class="container">
                <div class="col-md-12 product-w3ls-right">
                    <!-- breadcrumbs -->
                    <ol class="breadcrumb breadcrumb1">
                        <li><a href="home.html">Home</a></li>
                        <li class="active">可爱列表</li>
                    </ol>
                    <!-- //breadcrumbs -->

                    <div class="products-row">
                        <div v-for="goods in pageInfo.list" class="col-md-3 product-grids">
                            <div class="agile-products">
                                <div class="new-tag">
                                    <h6>TOP1 <br> Hot</h6>
                                </div>
                                <a href="goodsDetail.html" @click="toGoodsDetail(goods.id)">
                                    <img :src="goods.commoditUrl" class="img-responsive" alt="img"></a>
                                </a>
                                <div class="agile-product-text">
                                    <h5><a href="goodsDetail.html" @click="toGoodsDetail(goods.id)">{{goods.title}}</a></h5>
                                    <h6>${{goods.price}}</h6>
                                    <h6>{{goods.shopName}}</h6>
                                    <button type="submit" class="w3ls-cart pw3ls-cart" @click="toGoodsDetail(goods.id)">
                                        <i class="fa fa-cart-plus" aria-hidden="true"></i>查看详情
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <nav class="navbar-right" aria-label="Page navigation">
                                <ul class="pagination">
                                    <li v-if="!pageInfo.isFirstPage">
                                        <a href="#" aria-label="Previous" @click="initProductList(pageInfo.pageNum-1,16)">
                                            <span aria-hidden="true">&laquo;</span>
                                        </a>
                                    </li>
                                    <li v-for="i in pageInfo.navigatepageNums" :class="i==pageInfo.pageNum?'active':''">
                                        <a @click="initProductList(i,16)">{{i}}</a>
                                    </li>
                                    <li v-if="!pageInfo.isLastPage">
                                        <a href="#" aria-label="Next" @click="initProductList(pageInfo.pageNum+1,16)">
                                            <span aria-hidden="true">&raquo;</span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                        <div class="clearfix"> </div>
                    </div>

                    <!-- //add-products -->
                </div>
                <div class="clearfix"> </div>
            </div>
        </div>
        <!--//products-->

        <!--最热商品-->
        <!--最热商品-->
        <div class="add-products">
            <h3 class="w3ls-title">热卖商品</h3>
            <div class="container">
                <div class="add-products-row">
                    <div class=" w3ls-add-grids" v-for="g in hot">
                        <a href="goodsDetail.html" @click="toGoodsDetail(g.id)">
                            <img :src="g.commoditUrl">
                            <p>{{g.title}}<span>${{g.price}}</span></p>
                            <span>Shop now <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="copy-right" id="foot"></div>
</body>
<script type="text/javascript" src="js/jquery-cookie-1.4.1.js"></script>
<script type="text/javascript" src="js/vue-2.6.11.js"></script>
<script type="text/javascript" src="js/axios-0.19.2.min.js"></script>
<script type="text/javascript" src="js/layer.js"></script>
<script type="text/css" src="js/mobile/need/layer.css"></script>
<script type="text/javascript" src="js/productList/productList.js"></script>
</html>
<script>
    $(function(){
        $("#header").load("/header");
        $("#foot").load("/foot");
    });
</script>